{extend name="public/common"}

{block name="style"}
<title>公司简讯详情</title>
<link rel="stylesheet" href="/home/css/news/detail.css?v={$Think.config.version}">
{/block}

{block name="body"}
<div id="app" v-cloak>
    <div class="header">
        <p class="title">{{detail.title}}</p>
        <p class="publisher">
            <span>{{detail.publisher}}</span>
            <span class="view">{{detail.views}} <i>{{detail.create_time | timeToString('ymd')}}</i></span>
        </p>
    </div>
    <div class="body">
        <div class="article" v-html="resizeImage" ref="article"></div>
    </div>
    <div class="comment-box">
        <p>已有{{detail.browser_user.length}}人查看</p>
        <div class="user-list">
            <div v-for="item in detail.browser_user">
                <div class="img-box">
                    <img :src="item.header?item.header:'/home/images/common/default.png'" />
                </div>
                <p>{{item.username}}</p>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script>
    console.log({$detail})
    var vm = new Vue({
        el:'#app',
        data:{
            detail:{$detail},
            sendBoxValid:false,
            loading: false,
            loadOver: true,
            len:0,
            content:''
        },
        computed: {
            resizeImage() {
                return this.detail.content;
            }
        },
        mounted() {
            var imgs = this.$refs.article.getElementsByTagName("img");
            console.log(imgs);
            for(var i in imgs) {
                if(imgs[i].naturalWidth < .5 * window.screen.width) {
                    imgs[i].style.width = '20px';
                    imgs[i].style.height = '20px';
                    imgs[i].style.margin = '2px 2px 2px 0';
                }
            }
        },
        methods:{

        }
    })
</script>
{/block}
